<!DOCTYPE html>
<html lang="zh-CN">
<!-- 博客编辑页面：用于创建新的博客文章 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>

    <!-- 引入公共样式、编辑页面专用样式和editor.md样式 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/edit.css">
    <link rel="stylesheet" href="blogInfo-editormd/css/editormd.css" />
</head>

<body>
    <!-- 顶部导航栏 -->
    <div class="nav">
        <img src="pic/logo2.jpg" alt="博客系统Logo">
        <span class="blogInfo-title">我的博客系统</span>
        <div class="space"></div>
        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
        <!-- 注销功能 -->
        <a class="nav-span" href="#" onclick="logout()">注销</a>
    </div>
    
    <!-- 编辑器内容区域 -->
    <div class="content-edit">
        <!-- 标题输入和发布按钮 -->
        <div class="push">
            <input type="text" name="title" id="title" placeholder="请输入博客标题">
            <input type="button" value="发布文章" id="submit" onclick="submit()">
        </div>
        
        <!-- Markdown编辑器容器 -->
        <div id="editor">
            <!-- 隐藏的文本域，用于存储Markdown内容 -->
            <textarea style="display:none;" id="content" name="content">##在这里写下一篇博客</textarea>
        </div>
    </div>

    <!-- 引入jQuery库、editor.md库和公共JavaScript文件 -->
    <script src="js/jquery.min.js"></script>
    <script src="blogInfo-editormd/editormd.min.js"></script>
    <script src="js/common.js"></script>
    <script type="text/javascript">
        // 页面加载完成后初始化Markdown编辑器
        $(function () {
            var editor = editormd("editor", {
                width: "100%",
                height: "550px",
                path: "blogInfo-editormd/lib/",
                // 设置默认内容
                onload: function() {
                    this.setMarkdown("## 在这里写下一篇博客");
                }
            });
        });

        /**
         * 发布博客文章
         * 通过Ajax将博客标题和内容发送到后端进行保存
         */
        function submit() {
            // 获取博客标题和内容
            const title = $("#title").val().trim();
            const content = $("#content").val().trim();
            
            // 基本验证
            if (!title) {
                alert("请输入博客标题");
                return;
            }
            
            if (!content || content === "## 在这里写下一篇博客") {
                alert("请输入博客内容");
                return;
            }
            
            $.ajax({
                type: "post",
                url: "/blogInfo/add",
                contentType: "application/json",
                data: JSON.stringify({
                    userId: localStorage.getItem("loginUserId"),
                    title: title,
                    content: content
                }),
                success: function(result){
                    if(result.code == 200 && result.data){
                        // 发布成功，跳转到博客列表页
                        alert("博客发布成功！");
                        location.href = "blog_list.html";
                    } else {
                        // 发布失败处理
                        alert("发布失败：" + (result.errMsg || "未知错误"));
                    }
                },
                error: function() {
                    // 网络或服务器错误处理
                    alert("发布失败：网络或服务器错误");
                }
            });
        }
    </script>
</body>

</html>